<!-- 作品提交 -->
<template>
	<div>
		<el-divider content-position="left">参加的比赛列表</el-divider>
		<el-table :data="competitionList" stripe style="width: 100%">
			<el-table-column prop="cname" label="本次比赛名称" width="180">
			</el-table-column>
			<el-table-column prop="endTime" label="截止作品提交结束时间">
			</el-table-column>
			<el-table-column prop="createTime" label="比赛创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="getCompetitionId(scope.$index, scope.row)">提交作品</el-button>
					<el-button size="mini" :disabled="scope.row.haveAnnex" type="primary" @click="submitAnnex(scope.$index, scope.row)">提交附件📎</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="提交参赛作品截图" :visible.sync="dialogFormVisible">
			<el-form :model="works">
				<el-alert title="必须输入作品名,再上传作品截图,单次最大上传数量12张,image格式都可以,上传图片大小不能超过 10MB!" type="info">
				</el-alert>
				<el-alert title="参赛作品中应当包含设计图/海报图/商品主图等必要信息" type="info"></el-alert>
				<el-form-item label="作品名称" :label-width="formLabelWidth" style="margin-top: 20px;">
					<el-input v-model="formData.worksname" placeholder="请先输入作品名称" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="行业调研分析" :label-width="formLabelWidth" style="margin-top: 20px;">
					<el-input type="textarea" :rows="6" v-model="formData.IndustryAnalysis" placeholder="行业调研分析作为一项评审依据,请填写完整,行业调研分析首次提交之后不可更改~"
					 autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<template v-if="formData.worksname">
					<el-divider><i class="el-icon-mobile-phone">审核前,可随时增加作品截图,但作品名不可更改</i></el-divider>
					<el-upload action="/works/upload" list-type="picture-card" accept="image/*" :limit="imgLimit" :file-list="productImgs"
					 :multiple="isMultiple" :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" :data="formData"
					 :before-upload="beforeAvatarUpload" :on-exceed="handleExceed" :on-error="imgUploadError">
						<i class="el-icon-plus"></i>
					</el-upload>
				</template>

				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">完成</el-button>
			</div>
		</el-dialog>

		<el-dialog title="上传附件📎" :visible.sync="dialogVisible1" width="40%">
			<el-upload class="upload-demo" ref="upload" :data="formData" :multiple="false" limit="1" :auto-upload="false" action="/upload/">
				<el-button slot="trigger" size="small" type="primary" style="margin-right: 0.625rem;">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
			</el-upload>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Submit",
		data() {
			return {
				competitionList: [],
				user: JSON.parse(window.sessionStorage.getItem("user")),
				dialogFormVisible: false,
				dialogVisible1: false,
				works: {},
				formLabelWidth: "100px",
				dialogVisible: false,
				dialogImageUrl: '',

				productImgs: [],
				isMultiple: true,
				imgLimit: 12,
				formData: {
					userId: JSON.parse(window.sessionStorage.getItem("user")).id,
					worksname: "",
					IndustryAnalysis: "",
					competitionId: "",
				},
			}
		},
		mounted() {
			this.initMyCompetitionList();
		},
		methods: {
			submitUpload() {
				this.$refs.upload.submit();
			},
			// 上传附件
			submitAnnex(index, data) {
				this.formData.competitionId = data.id;
				this.dialogVisible1 = true;
			},
			getCompetitionId(index, data) {
				this.formData.competitionId = data.id;
				this.dialogFormVisible = true;
			},
			initMyCompetitionList() {
				this.getRequest("/users/joinList?id=" + this.user.id).then(res => {
					if (res) {
						this.competitionList = res.obj;
					}
				})
			},
			handlePictureCardPreview(file) { //预览图片时调用
				console.log(file);
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			beforeAvatarUpload(file) { //文件上传之前调用做一些拦截限制
				console.log(file);
				const isJPG = true;
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				//   this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 10MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file) { //图片上传成功
				console.log(res);
				// console.log(file);
				if (res.status == 200) {
					this.$message({
						showClose: true,
						message: res.msg,
						type: 'success'
					});
				} else if (res.status == 500) {
					this.$message({
						showClose: true,
						message: res.errorMsg,
						type: 'warning'
					});
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleExceed(files, fileList) { //图片上传超过数量限制
				this.$message.error('上传图片不能超过12张!');
			},
			imgUploadError(err, file, fileList) { //图片上传失败调用
				console.log(err)
				this.$message.error('上传图片失败!');
			}
		},
	}
</script>

<style>
</style>
